<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addLeaderForm" ref="addLeaderRef" :rules="addLeaderrules">
      <el-form-item label="人员姓名" :label-width="formLabelWidth" prop="teacherNumber">
        <el-select v-model="addLeaderForm.teacherNumber" filterable @change="filterData" placeholder="请选择人员姓名">
          <el-option v-for="item in list" :key="item.teacherNumber" :label="item.name" :value="item.teacherNumber" />
        </el-select>
      </el-form-item>
      <el-form-item label="管理年级" :label-width="formLabelWidth" prop="gradeId" v-if="type == 1">
        <el-select v-model="addLeaderForm.gradeId" autocomplete="off" @change="filterGradeId" placeholder="请选择年级">
          <el-option v-for="gradeId in gradeIds" :key="gradeId" :value="gradeId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理班级" :label-width="formLabelWidth" v-if="type == 1" prop="checkedClassInfo">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange()">全选</el-checkbox>
        <el-checkbox-group v-model="addLeaderForm.checkedClassInfo" @change="handleCheckedClassInfoChange">
          <el-checkbox v-for="item in classInfos" :key="item.id" :label="item.id">
            <div style="width: 100px">{{ item.name }}</div>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="工号" :label-width="formLabelWidth"
                                      prop="teacherNumber">
                            <el-input
                                    v-model="addLeaderForm.teacherNumber"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写工号"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="校区" :label-width="formLabelWidth"
                                      prop="campus" v-if="addLeaderForm.id">
                            <el-input
                                    v-model="addLeaderForm.campus"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写校区"
                            ></el-input>
                        </el-form-item> -->

      <!-- <el-form-item label="角色：1年级主任、2教育处主任" :label-width="formLabelWidth"
                                      prop="role" v-if="addLeaderForm.id">
                            <el-input
                                    v-model="addLeaderForm.role"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写角色：1年级主任、2教育处主任"
                            ></el-input>
                        </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddLeader",
  components: { ElForm, ElMessage },
  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      type: 0,
      list: [],
      gradeIds: [],
      map: {},
      classInfos: [],
      checkAll: false,
      personnelType: "",
      addLeaderForm: {
        teacherName: "",
        teacherNumber: "",
        campus: "",
        gradeId: "",
        role: "",
        checkedClassInfo: [],
      },
      // 校验规则
      addLeaderrules: {
        teacherName: vxRule(true, null, "blur"),
        teacherNumber: vxRule(true, null, "blur"),
        // checkedClassInfo: vxRule(true, null, "blur"),
        // gradeId: vxRule(true, null, "blur"),
      },
    };
  },

  methods: {
    handleCheckAllChange() {
      let list = new Array();
      if (this.checkAll) {
        for (let i = 0; i < this.map[this.addLeaderForm.gradeId].length; i++) {
          list.push(this.map[this.addLeaderForm.gradeId][i].id);
        }
      }

      this.addLeaderForm.checkedClassInfo = list;
    },
    handleCheckedClassInfoChange() { },
    getBaseClassInfoList() {
      httpService("/javaApi/baseClassInfo/getAllEffectClass", {}, "get").then(
        (data) => {
          this.map = data;
          // if (this.type == 2 || this.type == 3) {
          //   this.selectHandle(data, this.addLeaderForm.id)
          // }
          if (this.addLeaderForm.gradeId != '') {
            this.classInfos = this.map[this.addLeaderForm.gradeId];
            httpService("/javaApi/leaderClassIds/selectedList/" + this.addLeaderForm.id, {}, "get").then(
              (da) => {
                let list = new Array();
                for (let i = 0; i < da.length; i++) {
                  list.push(da[i].classId);
                }
                this.addLeaderForm.checkedClassInfo = list;
              }
            );
          }
        }
      );
    },

    // selectHandle(myArr, myId) { 
    //   for (let key in myArr) {
    //     console.log(key);
    //     this.classInfos = this.map[key];
    //     httpService("/javaApi/leaderClassIds/selectedList/" + myId, {}, "get").then(
    //       (da) => {
    //         console.log(123123, da);
    //         let list = new Array();
    //         for (let i = 0; i < da.length; i++) {
    //           list.push(da[i].classId);
    //         }
    //         this.addLeaderForm.checkedClassInfo = list;
    //       }
    //     );
    //   } 
    // },

    getGradeIds() {
      let date = new Date();
      let nowYear = parseInt(date.getFullYear());
      let nowMonth = parseInt(date.getMonth() + 1);
      let gradeIds = [];
      if (nowMonth > 6) {
        gradeIds.push(nowYear - 2);
        gradeIds.push(nowYear - 1);
        gradeIds.push(nowYear);
      } else {
        gradeIds.push(nowYear - 3);
        gradeIds.push(nowYear - 2);
        gradeIds.push(nowYear - 1);
      }
      this.gradeIds = gradeIds;
    },
    filterGradeId(val) {
      this.classInfos = this.map[val];
    },
    filterData(val) {
      let obj = this.list.find((item) => {
        return item.teacherNumber === val;
      });
      this.addLeaderForm.teacherName = obj.name;
    },

    getBaseTeacherListApp() {
      httpService("/javaApi/baseTeacher/list/1/10000", {}, "get").then(
        (data) => {
          this.list = data.list;

        }
      );
    },
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getLeaderById(id) {
      httpService("/javaApi/leader/queryById", { id: id }, "get").then(
        (data) => {
          this.addLeaderForm = data;
        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.addLeaderForm.id = "";
      this.addLeaderForm.teacherName = "";
      this.addLeaderForm.teacherNumber = "";
      this.addLeaderForm.campus = "";
      this.addLeaderForm.gradeId = "";
      this.addLeaderForm.role = "";
    },
    save() {
      this.$refs.addLeaderRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("teacherName", this.addLeaderForm.teacherName);
          params.append("teacherNumber", this.addLeaderForm.teacherNumber);
          params.append("role", this.type);
          if (this.type == 1) {
            params.append("gradeId", this.addLeaderForm.gradeId);
            params.append("choose", this.addLeaderForm.checkedClassInfo);
          }
          if (this.addLeaderForm.id) {
            params.append("id", this.addLeaderForm.id);
            httpService("/javaApi/leader/edit", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success("修改成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getLeaderList();
              } else {
                ElMessage.error("修改失败");
              }
            });
          } else {
            httpService("/javaApi/leader/add", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success("添加成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getLeaderList();
              } else {
                ElMessage.error("添加失败");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
</style>